<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        background-color: black;
        font-size: 30px;
        font-family: "华文楷体";
        position: relative;
    }

    /*导航栏*/
    ul li {
        cursor: pointer;
    }

    nav {
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: slategrey;
    }

    /*导航栏的一级ul*/
    nav > ul {
        line-height: 50px;
        display: flex;
        flex-flow: nowrap;
        margin: 0;
        padding: 0;
    }

    /*链接中的文字颜色和过渡*/
    li > a {
        text-decoration: none;
        color: aquamarine;
        margin: 10px;
        /*给nav > ul > li:hover a 过渡*/
        transition: all 0.4s ease-out;
    }

    /*所以ul取消列表样式*/
    ul {
        list-style: none;
    }

    /*一级导航选项,*/
    nav > ul > li {
        background-color: grey;
        border-radius: 0.5rem;
        margin: 1px;
        /*给 ul li:hover 过渡*/
        transition: all 0.5s ease-out;
    }

    /*所以li鼠标悬浮时放大1.05倍 背景颜色透明0.3倍*/
    nav ul > li:hover {
        background-color: rgba(10, 302, 10, 00.3);
        transform: scale(1.05);
    }

    /*鼠标悬浮在一级菜单选项时文字的颜色*/
    nav > ul > li:hover a {
        color: black;
    }

    /*二级菜单 隐藏二级菜单 ul绝对定位--不占空间,可以消除一级菜单背景颜色的拉长 */
    nav > ul ul {
        display: none;
        margin: 0;
        padding: 0;
        border-radius: 0.7rem;
        position: absolute;
        background-color: #b3b1af;
        overflow: hidden;
    }

    /*将二级菜单显示*/
    nav > ul > li:hover > ul {
        list-style: none;
        display: block;
        color: pink;
    }

    /*鼠标悬浮在二级菜单选项上时取消放大倍数,行高变成50px*/
    nav > ul ul li:hover {
        transform: scale(1);
        line-height: 53px;
        background-color: grey;
    }

    /*鼠标悬浮在二级菜单选项上时a的文字颜色改变*/
    nav > ul ul li:hover a {
        color: pink;
    }

    /*二级菜单选项上的文字水平居中*/
    nav > ul ul li {
        padding: 5px;
        white-space: nowrap;
        text-align: center;
    }

    /*导航栏的倒三角*/
    .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.15em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }

    .dropRight-toggle::after {
        float: right;
        display: inline-block;
        margin-right: 0.3em;
        margin-top: 10px;
        content: "";
        border-bottom: 0.3em solid transparent;
        border-right: 0;
        border-top: 0.3em solid transparent;
        border-left: 0.3em solid;
    }

    .dropLeft-toggle::after {
        float: left;
        margin-left: 0.8rem;
        display: inline-block;
        margin-top: 10px;
        content: "";
        border-bottom: 0.3em solid transparent;
        border-left: 0;
        border-top: 0.3em solid transparent;
        border-right: 0.3em solid;
    }


    aside {
        display: flex;
        justify-content: space-between;
    }

    /*侧边栏导航*/
    aside_left {
        /*display: inline-block;*/
        margin-top: 100px;
        overflow: hidden;
    }

    aside_left ul {
        border-radius: 0.7rem;
        background-color: grey;
        margin: 0;
        padding: 0;
        position: relative;

    }

    /*隐藏二级菜单*/
    aside_left ul ul {
        position: absolute;
        display: none;
    }

    /*点击一级菜单选项时，二级菜单出现*/
    aside_left > ul > li:hover > ul {
        display: block;
        /*left: 100%;*/
    }

    /*点击一级菜单选项时二级菜单出现并且将一级菜单下移*/
    aside_left > ul > .drop:hover {
        color: black;
        background-color: aliceblue;
        margin-bottom: 120px;
    }

    /*二级菜单选项*/
    aside_left ul ul > li {
        width: 160px;
        /*选项内容不换行*/
        white-space: nowrap;
        color: greenyellow;
        background-color: #b3b1af;
    }

    /*一级菜单文字悬浮颜色*/
    aside_left ul li:hover a {
        color: black;
    }

    /*二级菜单文字颜色*/
    aside_left ul ul > li a {
        color: black;
    }

    /*二级菜单文字悬浮颜色*/
    aside_left ul ul li:hover a {
        color: white;
    }

    /*二级菜单悬浮时背景颜色*/
    aside_left ul ul li:hover {
        line-height: 45px;
        background-color: rgba(0, 0, 0, 0.8);
        transform: scale(1.05);
    }

    /*侧边栏右侧菜单*/
    aside_right {
        text-align: right;
        position: relative;
        margin-top: 100px;
    }

    aside_right > ul {
        border-radius: 0.7rem;
        background-color: grey;
        margin: 0;
        padding: 0;
        position: relative;
    }

    aside_right > ul ul {
        margin: 0;
        padding: 0;
        background-color: #b3b1af;
        display: none;
    }

    aside_right > ul ul li:hover {
        background-color: black;
    }

    aside_right > ul > li:hover {
        background-color: pink;
    }

    /* 使用js  右侧菜单栏显示*/
    .block {
        display: block;
    }

    .transition {
        transition: all 1s ease-out;
    }
</style>
<body>

<!--主菜单-->
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li>
            <a href="#" class="dropdown-toggle">爱好</a>
            <ul>
                <li><a href="#">时常学习</a></li>
                <li><a href="#">少量游戏</a></li>
                <li><a href="#">经常运动</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="dropdown-toggle">作品</a>
            <ul>
                <li><a href="#">项目一</a></li>
                <li><a href="#">项目二</a></li>
                <li><a href="#">项目三</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="dropdown-toggle">轨迹</a>
            <ul>
                <li><a href="#">人生轨迹</a></li>
                <li><a href="#">人生旅途</a></li>
                <li><a href="#">人生价值</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="dropdown-toggle">联系方式</a>
            <ul>
                <li><a href="#">QQ</a></li>
                <li><a href="#">微信</a></li>
                <li><a href="#">邮箱</a></li>
            </ul>
        </li>
    </ul>
</nav>

<!--侧边栏-->
<aside>
    <!--侧边栏左侧菜单-->
    <aside_left>
        <ul>
            <li><a href="#">首页</a></li>
            <li class="drop">
                <a href="#" class="dropRight-toggle">爱好</a>
                <ul>
                    <li><a href="#">项目一</a></li>
                    <li><a href="#">项目二</a></li>
                    <li><a href="#">项目三</a></li>
                </ul>
            </li>
            <li class="drop">
                <a href="#" class="dropRight-toggle">作品</a>
                <ul>
                    <li><a href="#">人生轨迹</a></li>
                    <li><a href="#">人生旅途</a></li>
                    <li><a href="#">人生价值</a></li>
                </ul>
            </li>
            <li class="drop">
                <a href="#" class="dropRight-toggle">轨迹</a>
                <ul>
                    <li><a href="#">人生轨迹</a></li>
                    <li><a href="#">人生旅途</a></li>
                    <li><a href="#">人生价值</a></li>
                </ul>
            </li>
            <li class="drop">
                <a href="#" class="dropRight-toggle">联系方式</a>
                <ul>
                    <li><a href="#">QQ</a></li>
                    <li><a href="#">微信</a></li>
                    <li><a href="#">邮箱</a></li>
                </ul>
            </li>
        </ul>
    </aside_left>

    <!--侧边栏右侧菜单-->
    <aside_right>
        <ul>
            <li class="menu_main">
                <a href="#" class="dropLeft-toggle">首页</a>
                <ul>
                    <li><a href="#">项目一</a></li>
                    <li><a href="#">项目二</a></li>
                    <li><a href="#">项目三</a></li>
                </ul>
            </li>
            <li class="drop menu_main">
                <a href="#" class="dropLeft-toggle">爱好</a>
                <ul>
                    <li><a href="#">项目一</a></li>
                    <li><a href="#">项目二</a></li>
                    <li><a href="#">项目三</a></li>
                </ul>
            </li>
            <li class="drop menu_main">
                <a href="#" class="dropLeft-toggle">作品</a>
                <ul>
                    <li><a href="#">人生轨迹</a></li>
                    <li><a href="#">人生旅途</a></li>
                    <li><a href="#">人生价值</a></li>
                </ul>
            </li>
            <li class="drop menu_main">
                <a href="#" class="dropLeft-toggle">轨迹</a>
                <ul>
                    <li><a href="#">人生轨迹</a></li>
                    <li><a href="#">人生旅途</a></li>
                    <li><a href="#">人生价值</a></li>
                </ul>
            </li>
            <li class="drop menu_main">
                <a href="#" class="dropLeft-toggle">联系方式</a>
                <ul>
                    <li><a href="#">QQ</a></li>
                    <li><a href="#">微信</a></li>
                    <li><a href="#">邮箱</a></li>
                </ul>
            </li>
        </ul>
    </aside_right>

</aside>
<script>
    //侧边栏右侧菜单
    var menu_main = document.querySelectorAll(".menu_main")
    // console.log(menu_main.length)
    //一进网页第一个菜单选项就默认选中打开
    let first_item = menu_main[0].querySelector("ul")
    first_item.className = " block"
    // 点击容易选项就打开对应的二级菜单
    for (let i = 0; i < menu_main.length; i++) {
        menu_main[i].addEventListener("click", function () {
            // 点击一级选项时默认所有的选项都隐藏(即删除.block类)
            hideAllMenus(i)
            let ul = this.querySelector("ul")
            // 调用函数，向二级菜单添加block类
            toggleClass(ul, "block")
        })
        // 点击二级菜单时 二级菜单因为冒泡的原因也会被隐藏(即删除.block类) 所以需要关闭二级菜单冒泡
        let subMenuItems = menu_main[i].querySelectorAll("li");
        for (let j = 0; j < subMenuItems.length; j++) {
            subMenuItems[j].addEventListener("click", function (event) {
                // 关闭冒泡
                event.cancelBubble = true
            });
        }
    }

    // 隐藏所有一级选项列表  除开当前被选中的一级选项
    function hideAllMenus(i) {
        let allMenus = document.querySelectorAll(".menu_main > ul");
        for (let j = 0; j < allMenus.length; j++) {
            if (i !== j) {
                removeClass(allMenus[j], "block");
            }
        }
    }

    // 判断标签中的类是否存在，否就添加，是就删除
    {
        // 判断标签中的类是否存在，否就添加，是就删除
        function toggleClass(box, cn) {
            let reg = new RegExp("\\b" + cn + "\\b")
            if (!reg.test(box.className)) {
                addClass(box, cn)
            } else {
                removeClass(box, cn)
            }
        }

        // 给标签添加类
        function addClass(box, cn) {
            // 正则表达式
            box.className = " " + cn
        }

        // 给标签删除类
        function removeClass(box, cn) {
            // 正则表达式
            let reg = new RegExp("\\b" + cn + "\\b")
            box.className = box.className.replace(reg, "")
        }
    }

</script>
</body>
</html>
